<script setup>
// import {User} from '@element-plus/icons-vue'
import {ref,computed} from 'vue'

const tableData = ref([
  {name: '张一', date: '1985-10-23', address: '河南省郑州市'},
  {name: '王二', date: '1985-10-23', address: '河南省郑州市'},
  {name: '李三', date: '1985-10-23', address: '河南省郑州市'},
  {name: '周四', date: '1985-10-23', address: '河南省郑州市'},
  {name: '张五', date: '1985-10-23', address: '河南省郑州市'},
  {name: '张三丰', date: '1985-10-23', address: '河南省郑州市'},
])

const add = () => {
  tableData.value.push({name: '张一', date: '1985-10-23', address: '河南省郑州市'})
}

const search = ref()
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const del = s => {
  ElMessageBox.confirm(
      '是不是要删除：<span style="font-weight: 800;color:red">' + s.row.name + '</span> ?',
      '系统提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
          duration: 300,
          onClose: () => {
            tableData.value.splice(s.$index, 1)
          }
        })
      })
  // .catch(() => {
  //   ElMessage({
  //     type: 'info',
  //     message: 'Delete canceled',
  //   })
  // })

}
</script>

<template>

  <el-row>
    <el-col :span="18" :offset="3" style="margin:15px auto">
      <el-input v-model="search" style="width:200px"  size="small" placeholder="请姓名关键字" />
    </el-col>
    <el-col :span="18" :offset="3">
      <el-table :data="filterTableData" stripe border style="width: 100%">
        <template #empty>no....data无数据</template>
        <el-table-column prop="date" label="出生日期" width="180"/>
        <el-table-column prop="name" label="姓名" width="180"/>
        <el-table-column prop="address" label="住址"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="primary">审核</el-button>
            <el-button size="small" type="success">编辑</el-button>
            <el-button size="small" type="warning">修改</el-button>
            <el-button size="small" type="danger" @click="del(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="18" :offset="3">
      <el-button style="width:100%;margin:15px auto" type="primary" @click="add">新增学生信息</el-button>
    </el-col>
  </el-row>
</template>

